<template>
	<div>
		
		<h1>课程列表</h1>

		<table border="1" style="width:100%">


			<tr v-for="(item,index) in data">


				<td>{{ item.id }}</td>


				<td><a :href="'http://localhost:8080/coursedetail?id='+item.id">{{ item.title }}</a></td>
				
			</tr>

		</table>


		<!--表格控件-->

		<van-grid :gutter="10">

			<van-grid-item v-for="value in 20" :key="value" icon="photo-o" text="课程标题" url="http://baidu.com" />


		</van-grid>


		<!--分页控件-->

		<van-pagination @change="get_data"  v-model="page" :total-items="total" :items-per-page="size"   />


		<input type="text" />

		<button>跳</button>


	</div>
</template>



<script>

import mycate from './mycate.vue';

export default{

	data(){

		return {

			data:[],
			page:1,
			size:1,
			total:0,
			cate:{1:'计算机课程',2:'计算机语言',3:'计算机算法'}

		}

	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				return '123';


			}

	},
	components:{
		mycate
	},
	mounted:function(){

		//获取数据
		this.get_data();

	},
	methods:{

		get_data:function(){

			this.axios.get("http://localhost:8000/courselist/",{params:{page:this.page}}).then((res) => {


				console.log(res);

				this.data = res.data.data;
				this.total = res.data.total;

				

			});



		},


	}

}
	


</script>


<style>
	



</style>